<!--
 * @Description: 
 * @Author: shuliang
 * @Date: 2022-05-10 11:18:40
 * @LastEditTime: 2022-06-17 08:52:33
 * @LastEditors: shuliang
-->
<template>
	<div class="system-user-container">
		<el-card shadow="hover">
			<vxe-grid v-bind="gridOptions">
				<template #toolbar_buttons>
					<el-button size="default" type="success" class="ml10" @click="onOpenAddRole"><el-icon><ele-FolderAdd /></el-icon>新增角色</el-button>
				</template>
				<template #status_default="{ row }">
					<el-tag type="success" v-if="row.status">启用</el-tag>
					<el-tag type="info" v-else>禁用</el-tag>
				</template>
				<template #operate="{ row }">
					<el-button :disabled="row.userName === 'admin'" size="small" type="text" @click="onOpenEditRole(row)">修改</el-button>
					<el-button :disabled="row.userName === 'admin'" size="small" type="text" @click="onRowDel(row)">删除</el-button>
				</template>
				<template #empty>
					<span style="color: red">
						<img src="https://pic2.zhimg.com/50/v2-f7031359103859e1ed38559715ef5f3f_hd.gif" />
						<p>没有更多数据了！</p>
					</span>
				</template>
			</vxe-grid>
		</el-card>
		<AddRole ref="addRoleRef" />
		<EditRole ref="editRoleRef" />
	</div>
</template>

<script setup lang="ts">
import {  getCurrentInstance, reactive, ref } from 'vue';
import { VxeGridProps } from 'vxe-table';
import { getRole } from '/@/api/role/index';
import { IRole, IRoleParams } from '/@/models/system/role';
import AddRole from '/@/views/system/role/component/addRole.vue';
import EditRole from '/@/views/system/role/component/editRole.vue';

        const { proxy} = getCurrentInstance() as any;
		const addRoleRef = ref();
		const editRoleRef = ref();

		const onOpenAddRole = () => {
			addRoleRef.value.openDialog();
		};

		const onOpenEditRole = (row: IRole) => {
			editRoleRef.value.openDialog(row);
		};

		const onRowDel = (row: IRole) => {
			// proxy.msgInfo("测试测试")
			proxy
				.$confirm(`此操作将永久删除角色名称：“${row.roleName}”，是否继续?`, '提示', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'warning',
				})
				.then(() => {
					proxy.msgSuccess('删除成功');
				})
				.catch(() => {});
		};
		// const toolBarBtnClick = ({ code, button, $event } :any)=>{
		//     console.log(code,button,$event)
		// }

		const gridOptions = reactive<VxeGridProps>({
			border: false,
			height: 703,
			rowConfig: {
				keyField: 'id',
			},
			pagerConfig: {
				pageSize: 10,
			},
			formConfig: {
                titleWidth: 100,
                titleAlign: 'right',
                items: [
                  { field: 'roleName', title: '角色名称', span: 6, titlePrefix: { message: '请输入角色名称', icon: 'fa fa-exclamation-circle' }, itemRender: { name: '$input', props: { placeholder: '请输入角色名称' } } },
                  { field: 'roleSign', title: '角色标识', span: 6, itemRender: { name: '$input', props: { placeholder: '请输入角色标识' } } },
                  { field: 'status', title: '角色状态', span: 6,  itemRender: { name: '$select',props: { placeholder: '请选择角色状态' } , options: [{ label: '不可删除', value: '不可删除' },{ label: '测试用户', value: '测试用户' }] } },
                  { span: 6, align: 'left',  itemRender: { name: '$buttons', children: [{ props: { type: 'submit', content: '搜索', status: 'primary' } }, { props: { type: 'reset', content: '重置' } }] } }
                ]
              },
			columns: [
				{ type: 'checkbox', width: 50 },
				{ type: 'seq', title: '序号', width: 60 },
				{ field: 'roleName', title: '角色名称', showOverflow: true },
				{ field: 'roleSign', title: '角色标识', showOverflow: true },
				{ field: 'sort', title: '排序', showOverflow: true },
				{ field: 'status', title: '角色状态', showOverflow: true, slots: { default: 'status_default' } },
				{ field: 'describe', title: '角色描述', showOverflow: true },
				{ field: 'createTime', title: '创建时间', showOverflow: true },
				{ title: '操作', width: 200, slots: { default: 'operate' } },
			],
			toolbarConfig: {
				slots: {
					buttons: 'toolbar_buttons',
				},
				refresh: true,
			},
			proxyConfig: {
				form: true,// 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
				seq: true, // 启用动态序号代理（分页之后索引自动计算为当前页的起始序号）
				props: {
					result: 'records',
					total: 'total',
				},
				ajax: {
					// 接收 Promise
					// 当点击工具栏查询按钮或者手动提交指令 query或reload 时会被触发
					query: ({ page, form  }) => {
						const queryParams: any = Object.assign({}, form)
						console.log(queryParams)
						return new Promise((resolve) => {
							let params: IRoleParams = {
								...queryParams,
								page: page.currentPage,
								pageSize: page.pageSize,
							};
							getRole(params).then((res) => {
								if (!res.code) {
									resolve(res.data);
								}
							});
						});
					},
				},
			},
		});
</script>

<style>
</style>